

function Tab(el){
    this.el=document.querySelector(el)
    this.init()
}

Tab.prototype.init=function(){
    this.changeTitle()
}

Tab.prototype.changeTitle=function()
{
    let ulLiObjs=this.el.querySelectorAll('ul li')
    ulLiObjs.forEach((item,i)=>{
        item.onmouseover=()=>{
            // this.el.querySelector('ul li.active').className=''
            // ulLiObjs[i].className='active'
            this.tbTitle(ulLiObjs,i)
            // this.el.querySelectorAll('ol li.active').className=''
            // let olLiObjs=this.el.querySelectorAll('ol li')
            // olLiObjs[i].className='active'
            this.tbContent(i)
        }
    })
}

Tab.prototype.tbTitle=function(ulLiObjs,i){
    this.el.querySelector('ul li.active').className=''
    ulLiObjs[i].className='active'
}
Tab.prototype.tbContent=function(i){
    this.el.querySelectorAll('ol li.active').className=''
    let olLiObjs=this.el.querySelectorAll('ol li')
    olLiObjs[i].className='active'
}
































